<template>
  <div>
    <el-dropdown>
      <span class="el-dropdown-link">
        <el-avatar :size="35" src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" />
      </span>
      <template #dropdown>
        <el-dropdown-menu class="rounded-md">
          <el-dropdown-item>
            <el-icon><User /></el-icon>
            <span>账号设置</span>
          </el-dropdown-item>
          <el-dropdown-item>
            <el-icon><Compass /></el-icon>
            项目地址
          </el-dropdown-item>
          <el-dropdown-item @click="router.push('/login/glass')">
            <el-icon><CircleClose /></el-icon>
            退出登录
          </el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
  </div>
</template>

<script setup lang="ts">
const router = useRouter()

</script>

<style scoped lang="scss">
:global(.el-dropdown) {
  display: inline-block;
}

:global(.el-dropdown-menu) {
  display: flex;
  flex-direction: column;
  padding: 0;
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);

  :deep(.el-dropdown-menu__item) {
    display: flex;
    align-items: center;
    //padding: 10px 20px;
    font-size: 14px;
    color: #303133;
    transition: all 0.3s;

    &:hover {
      background-color: #f5f5f5;
    }

    :first-child {
      border-top-left-radius: 10px;
      border-top-right-radius: 10px;
    }

    :last-child {
      border-bottom-left-radius: 10px;
      border-bottom-right-radius: 10px;
    }
  }
}
</style>